<template>
  <div class="key-style" @click="record">
    <div v-if="modelValue.key === ''">录制</div>
    <div>{{ recording ? '录制中...' : modelValue.code }}</div>
  </div>
</template>

<script setup lang="ts">
import type { tMousePosition } from '~/models/pyBundles/bunKeyMouse';
import type { InterfaceType } from '~/models/types/interface_type';
import type { DataType } from '~/models/types/type';
import { defaultTaskManager } from '~/models/Task/TaskManager';

interface _Key {
  key: string
  code: string
}

const props = defineProps<{
  type: DataType,
  modelValue: _Key
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', event: _Key): void,
}>()

const t = computed(() => props.type as InterfaceType)

function listenKey(ev: KeyboardEvent) {
  props.modelValue.code = ev.code
  props.modelValue.key = ev.key
  emit('update:modelValue', props.modelValue)
  window.removeEventListener('keydown', listenKey)
  recording.value = false
}

const recording = ref(false)
async function record() {
  recording.value = true
  window.addEventListener('keydown', listenKey)
}

</script>

<style lang="scss" scoped>
.key-style {
  box-shadow: 0 0 5px rgb(255, 255, 255),0 4px 15px rgba(0, 0, 0,0.3);
  font-size: 1.25em;
  background-color: #f2f2f2;
  border-radius: 5px;
  text-align: center;
  line-height: 1.5em;
  transition: all 0.25s;
  color: dodgerblue;
  padding: 0 0.5rem;
}
</style>